<template>
  <div class="content-card">
    <div class="item">
      <div class="up">{{ "标准文件数" }}</div>
      <div class="down">
        <img src="@/assets/img/quality/4-1.jpg" alt="4-1" />
        <span>{{ v1 }}</span>
      </div>
    </div>
    <div class="item">
      <div class="up">{{ "数据元数" }}</div>
      <div class="down">
        <img src="@/assets/img/quality/4-2.jpg" alt="4-2" />
        <span>{{ v2 }}</span>
      </div>
    </div>
    <div class="item">
      <div class="up">{{ "代码集数" }}</div>
      <div class="down">
        <img src="@/assets/img/quality/4-3.jpg" alt="4-3" />
        <span>{{ v3 }}</span>
      </div>
    </div>
    <div class="item">
      <div class="up">{{ "模型数" }}</div>
      <div class="down">
        <img src="@/assets/img/quality/4-4.jpg" alt="4-4" />
        <span>{{ v4 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "q4-box",
  props: {
    v1: {
      type: String,
      default: "0",
    },
    v2: {
      type: String,
      default: "0",
    },
    v3: {
      type: String,
      default: "0",
    },
    v4: {
      type: String,
      default: "38",
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  display: grid;
  padding: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  .item {
    padding: 10px;
    .up {
      font-size: 14px;
    }
    .down {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 24px;
        height: 24px;
        margin: 5px;
      }
      span {
        font-size: 24px;
        &::after {
          content: "个";
          font-size: 14px;
          margin: 2px;
        }
      }
    }
    &:nth-child(1) {
      border-bottom: 1px solid #eee;
      border-right: 1px dashed #eee;
      .down span {
        color: #618ec3;
      }
    }
    &:nth-child(2) {
      border-bottom: 1px solid #eee;
      .down span {
        color: #c4595b;
      }
    }
    &:nth-child(3) {
      border-right: 1px dashed #eee;
      .down span {
        color: #b29372;
      }
    }
    &:nth-child(4) {
      .down span {
        color: #0099e2;
      }
    }
  }
}
</style>
